<!-- 其他人的日记列表页面 -->
<template>
  <div>
    <!-- 顶部 -->
    <van-sticky>
      <div class="top_div">
        <div class="return_div" @click="this.$router.back()">
          <van-icon name="arrow-left" />
        </div>
        <!-- 选择全部，本周，本月，今年，去年 -->
        <div class="dropdown_menu">
          <van-dropdown-menu>
            <van-dropdown-item
              v-model="diaryTimeTypeValue"
              :options="diaryTimeTypeOption"
              @change="changeDropDownMenuValue"
            />
          </van-dropdown-menu>
        </div>
        <!-- 日历：选择日期 -->
        <div class="calendar">
          <van-icon name="calendar-o" @click="openCalendar" />
        </div>
      </div>
    </van-sticky>
    <!-- 时间选择器 -->
    <van-datetime-picker
      v-model="currentDate"
      type="year-month"
      title="选择年月"
      :min-date="minDate"
      :max-date="maxDate"
      :formatter="formatter"
      v-show="timerShow"
      @cancel="closeTimer"
      @confirm="timerConfirm"
    />

    <van-empty
      v-if="diaryList.length === 0"
      image="https://myblog-mycaveolae.oss-cn-chengdu.aliyuncs.com/diary/empty01.jpg"
      image-size="20rem"
      description="没有日记"
    />

    <!-- 日记列表 -->
    <div style="margin-top: 1.5em;">
      <div
        class="diary_item"
        @click="toDiaryDetail(item)"
        v-for="(item, index) in diaryList"
        :key="index"
      >
        <div class="diary_create_time">
          <div style="font-size: 20px; font-weight: 600;">
            {{ item.haoDate }}
          </div>
          <div style="font-size: 14px; color: cadetblue;">
            {{ item.month }}月
          </div>
          <div style="font-size: 14px; color: #409eff;">{{ item.dayTime }}</div>
        </div>
        <div class="diary_content_div">
          {{
            item.content.length >= 38
              ? item.content.substring(0, 38) + '......'
              : item.content
          }}
        </div>
        <div>
          <van-image
            width="4rem"
            height="4rem"
            radius="6px"
            fit="cover"
            :src="item.diaryImg"
          />
        </div>
      </div>
    </div>

    <!-- 日记列表为空时显示 -->
    <van-empty
      v-if="diaryList.length === 0"
      image-size="10rem"
      description="没有日记"
    />
  </div>
</template>

<script>
import moment from 'moment'
import { getOtherUserDiaryListApi } from '../../api/diary'
export default {
  data() {
    return {
      userAid: this.$route.query.userAid, // 该用户的aid
      timerClickCount: 0, // 时间选择器的点击次数
      currentWeek: '星期天', // 今天是星期几
      currentMonth: '8', // 今天是几月份
      currentDay: '23', // 今天是几号
      timerShow: false, // 控制时间选择器的显示
      currentDate: new Date(2021, 0, 17), //当前时间
      minDate: new Date(1970, 0, 1), // 可选择的最小时间
      maxDate: new Date(2025, 0, 1), // 可选择的最大时间
      diaryTimeTypeValue: 0, // 日记的时间类型value（全部，本周，本月，今年，去年）
      diaryTimeTypeOption: [
        { text: '全部', value: 0 },
        { text: '本周', value: 1 },
        { text: '本月', value: 2 },
        { text: '今年', value: 3 },
        { text: '去年', value: 4 },
      ],
      currentYear: 2025, // 当前年
      diaryList: [], // 日记列表
      timerValue: '', // 时间选择器的值
    }
  },
  methods: {
    // 点击打开日历选择
    openCalendar() {
      this.timerClickCount += 1
      if (this.timerClickCount % 2 === 1) {
        this.maxDate = new Date(this.currentYear, 11, 1) // 获取当前年
        this.timerShow = true
      } else {
        this.timerShow = false
      }
    },

    // 关闭时间选择器
    closeTimer() {
      this.timerClickCount += 1
      this.timerShow = false
    },

    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`
      }
      if (type === 'month') {
        return `${val}月`
      }
      return val
    },

    // 获取当前时间的当前年
    getCurrentYear() {
      var date = new Date()
      this.currentYear = date.getFullYear()
      this.currentDay = date.getDate()
      this.currentMonth = date.getMonth() + 1
      // console.log(this.currentYear);
      var arr = [
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六',
      ]
      this.currentWeek = arr[date.getDay()]
    },

    // 点击确认之后
    timerConfirm(value) {
      // 将下拉菜单值改为全部：0
      this.diaryTimeTypeValue = 0
      this.timerValue = moment(value).format('YYYY-MM-DD').substring(0, 7)
      this.timerClickCount += 1
      this.timerShow = false
      // 查询日记列表
      this.getDiaryListFunc()
    },

    // 获取日记列表
    getDiaryListFunc() {
      var params = {
        userAid: this.userAid,
        diaryTimeTypeValue: this.diaryTimeTypeValue,
        timerValue: this.timerValue ? this.timerValue : '-1',
      }
      getOtherUserDiaryListApi(params).then((res) => {
        // console.log(res);
        this.diaryList = res.data.data
      })
    },

    // 下拉菜单值改变
    changeDropDownMenuValue(value) {
      // 将日期选择器里的值变为-1
      this.timerValue = '-1'
      this.diaryTimeTypeValue = value
      this.getDiaryListFunc()
    },

    // 去日记详情页面
    toDiaryDetail(item) {
      this.$router.push({
        path: '/diaryDetail',
        query: {
          diaryAid: item.diaryAid,
        },
      })
    },
  },
  created() {
    // 获取当前时间的当前年
    this.getCurrentYear()

    // 获取日记列表
    this.getDiaryListFunc()
  },
}
</script>

<style lang="scss" scoped>
.top_div {
  width: 96vw;
  height: 3.5em;
  background-color: rgb(86, 82, 82);
  display: flex;
  color: aliceblue;
  padding-top: 40px;
  padding-left: 4vw;
}
/deep/ .van-dropdown-menu__bar {
  background-color: rgb(86, 82, 82) !important;
}
/deep/ .van-dropdown-menu__title {
  color: aliceblue !important;
  font-size: 18px !important;
}
.dropdown_menu {
  margin-left: 6em;
}
.calendar {
  margin-left: 7.5em;
  margin-top: 13px;
}
/deep/ .van-icon {
  font-size: 27px !important;
}
van-datetime-picker {
  display: flex;
}
/deep/ .van-picker__toolbar {
  background-color: rgb(244, 214, 219);
}
/deep/ .van-picker__columns {
  background-color: aquamarine;
}
.diary_item {
  width: 90%;
  margin: auto;
  height: fit-content;
  padding: 0.5em 0.6em;
  display: flex;
  justify-content: space-evenly;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #e8eef3;
  border-radius: 5px;
}
.diary_content_div {
  padding-top: 9px;
  color: #303133;
  font-size: 13px;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.diary_create_time {
  width: 8em;
  // background-color: #8e97aa;
}
.return_div {
  margin-top: 10px;
}
</style>
